<template>
  <div class="out-list">
    <div class="out-list-search">
      <div class="out-list-start">
        <el-form label-position="top" label-width="100%" :model="search">
          <el-form-item label="输入住户姓名搜索">
            <div class="start-text"></div>
            <el-input style="width: 25%" v-model="search.title"></el-input>
            <el-button class="btn" type="primary" @click="inSearch()"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
        <!-- <div class="start-text">输入标题搜索</div>
        <el-input style="width: 25%" v-model="search.title"></el-input>
        <el-button class="btn" type="primary" @click="search()">搜索</el-button> -->
      </div>
    </div>
    <div class="out-list-header">
      <el-radio-group v-model="radio1" @change="requestData">
        <el-radio-button label="扫码返回"></el-radio-button>
        <el-radio-button label="申请返回"></el-radio-button>
      </el-radio-group>
    </div>
    <table-list
      :toTableData="tableData"
      :tableHeader="tableHeader"
      :deleteEdit="deleteEdit"
      :btn1="btn1"
      :btn2="btn2"
    ></table-list>
    <!-- 弹出框表单 -->
  </div>
</template>

<script>
import { request } from "@/network/request.js";
import TableList from "../../components/common/TableList.vue";
export default {
  data() {
    return {
      radio1: "扫码返回",
      search: {
        title: "",
      },
      tableHeader: [
        { prop: "name", label: "姓名" },
        { prop: "phone", label: "电话" },
        { prop: "now_address", label: "去往地点" },
        { prop: "arrive_time", label: "时间" },
      ],
      tableData: [], //传递给子组件数据
      deleteEdit: {
        options: 0,
        delete: 0,
        edit: 0,
      },
      btn1: "删除",
      btn2: "编辑",
    };
  },
  components: {
    TableList,
  },
  created() {
    this.requestData();
  },
  methods: {
    requestData() {
      // console.log("555");
      return new Promise((resove, reject) => {
        if (this.radio1 == "申请返回") {
          this.tableHeader = [
            { prop: "name", label: "姓名" },
            { prop: "phone", label: "电话" },
            { prop: "trans", label: "交通工具" },
            { prop: "now_address", label: "目前位置" },
            { prop: "way", label: "途径路径" },
            { prop: "go_time", label: "出发时间" },
            { prop: "arrive_time", label: "到达时间" },
          ];
          request({
            url: "/b-go-out-out-list",
          }).then((res) => {
            this.tableData = res.data.data.sort((a, b) => {
              return a.id < b.id ? 1 : -1;
            });
            this.tableData = this.tableData.filter((s) => {
              return s.state == "申请";
            });
            resove();
          });
        }
        if (this.radio1 == "扫码返回") {
          this.tableHeader = [
            { prop: "name", label: "姓名" },
            { prop: "phone", label: "电话" },
            { prop: "now_address", label: "出入地点" },
            { prop: "arrive_time", label: "时间" },
            { prop: "tem", label: "温度" },
            { prop: "state", label: "形式" },
          ];
          request({
            url: "/b-go-out-out-list",
          }).then((res) => {
            this.tableData = res.data.data.sort((a, b) => {
              return a.id < b.id ? 1 : -1;
            });
            this.tableData = this.tableData.filter((s) => {
              return s.state != "申请";
            });
            resove();
          });
        }
      });
    },

    inSearch() {
      // console.log(this.search.title);
      this.requestData().then(() => {
        if (this.search.title.length >= 1) {
          let newShowData = this.tableData.filter((s) => {
            return s.name.includes(this.search.title);
          });
          this.tableData = newShowData;
          // console.log(newShowData);
        }
      });
    },
  },
};
</script>

<style lang="scss">
@import "@/assets/styles/global.scss";
.out-list {
  .out-list-search {
    box-sizing: border-box;
    // margin: 20px;
    width: 100%;
    // height: 100%;
    padding: 20px;
    .out-list-start {
      width: 100%;
      // height: 120px;
      background-color: #ffffff;
      color: #000;
      margin-bottom: 10px;
      padding: 10px 20px;
      box-sizing: border-box;
      .btn {
        margin-left: 10px;
      }
      // @include center;
    }

    .out-list-table {
      // height: 100%;
      background-color: #ffffff;
      padding: 0 10px;
      box-sizing: border-box;
      // overflow: scroll;
      // overflow-y: scroll;
      .pagination {
        padding-top: 10px;
        padding-bottom: 100px;
        display: flex;
        @include right;
        background-color: #ffffff;
      }
    }
  }
  .out-list-header {
    // height: 50px;
    // border: 1px solid #ccc;
    // background-color: #161212;
    margin-left: 20px;
    box-sizing: border-box;
  }
}
</style>
